#navigation {

  background: #3a84c1;
  display: none;
  position: relative;
  margin: 0;
  padding: 0;

  @include small {
    display: block;
    margin-bottom: 3em;
  }


  ul.nav-list {

    background: none;
    border-bottom: 1px solid #245780;
    border-top: 1px solid #29699e;
    @include border-radius(3px);
    @include pie-clearfix();
    cursor: pointer;
    display: block;
    list-style: none;
    margin: 0 auto;
    padding: 1px 2px;
    position: relative;
    z-index: 10;

    @include small {
      background: #2f6ea1 url(../images/theme/navigation/navigation-bg-normal.png) top left repeat-x;
    }


    li {
      background: transparent;
      border-bottom: 1px solid #2f73a9;
      display: block;
      line-height: 1.0;
      position: relative;

      @include small {
        background: url(../images/theme/navigation/navigation-separator.png) top right repeat-y;
        border-bottom: none;
        float: left;
        padding: 0 2px 0 0;
        zoom: 1;
      }

      a {
        background: transparent;
        border-bottom: 1px solid #468cc6;
        color: #fff;
        display: block;
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 1.0em;
        font-weight: normal;
        line-height: 1.0;
        margin: 0;
        padding: 0;
        text-decoration: none;
        text-shadow: none;

        @include small {
          border-bottom: none;
        }

        span {
        	display: block;
        	height: 16px;
        	line-height: 16px;
        	padding: 10px 14px;
        }
      }

      // Hover
      @include small {
        &.hover,
        &:hover,
        &.selected.hover,
        &.selected:hover {
          > a {
            background: #3a84c1 url(../images/theme/navigation/navigation-bg-hover.png) top left repeat-x;
            color: #fff;
          }

          > .nav-list-sub-wrap {
            display: block;
          }

        }
      }

      // Selected
      &.selected {

        border-bottom: none;

        > a {
          border-bottom: none;
        }

        > a,
        &.hover > a,
        &:hover > a {
          background: #548332 url(../images/theme/navigation/navigation-bg-active.png) top left repeat-x;
          color: #fff;
        }

      }

      @include small {

        &:first-child {
          > a {
            > span {
             background: url(../images/theme/navigation/nav-home-icon.png) 50% 50% no-repeat;
             padding-left: 30px;
             font-size: 0;
             text-indent: -9999em;
            }
          }
        }

        &.add-idea {
          float: right;

          a {
            background: #f2f2f2 url(../images/theme/navigation/navigation-bg-highlight.png) 0 0 repeat-x;
            color: #3177ae;
            font-weight: bold;

            span {
              background: transparent url(../images/theme/icons/icon-add-24.png) 10px 50% no-repeat;
              min-height: 16px;
              padding-left: 32px;
            }

          }
        }

        &.login,
        &.logout {
          display: none;
        }


      }


      // Dropdown
      &.selected {
        .nav-list-sub-wrap {
          display: block;

          @include small {
            display: none;
          }
        }
      }

      .nav-list-sub-wrap {

        ul {
          background: #548332;
          border: none;
          list-style: none;
          margin: 0;
          padding: 0 0 0 10px;
          position: relative;

          li {
            border-bottom: 1px solid #dadfe5;
            display: block;
            float: none;
            margin: 0;
            padding: 0;

            a {
              background: #f0f1f5 url(../images/theme/navigation/nav-bg-gray.png) top left repeat-x;
              border-bottom: 1px solid #c4ced5;
              color: #2f73a9;
              display: block;
              font-size: 1.0em;
              margin: 0;
              padding: 1em;
              text-decoration: none;

              &:hover {
                background: #f0f1f5 url(../images/theme/navigation/nav-bg-gray.png) top left repeat-x;
                color: #2f73a9;
              }

            }
          }
        }

        @include small {
          background: transparent url(../images/theme/navigation/navigation-sub-bg-arrow.png) top left no-repeat;
          display: none;
          left: 0;
          padding: 11px 0 0 0;
          position: absolute;
          top: 100%;
          width: 200px;
          z-index: 598;

          ul {
            background: #f9f9fb;
            border: 1px solid #bbc6ce;
            border-top: 0px;
            margin: 0;
            padding: 0;
            z-index: 598;

            li {
              background: #f9f9fb;
              border-bottom: 1px solid #dadfe5;

              &.last {
                border-bottom: 0;
              }

              a {
                background: transparent;
                border-bottom: 0;
                color: #2f72a9;

                &:hover {
                  background: #3a84c1;
                  color: #fff;
                }
              }


            }

          }

        }

      }


    }





  }

}

&.ie7, &.ie8 {

  .top-wrap {
    display: block;
  }

  #navigation {
    display: block;
    margin-bottom: 3em;

    ul.nav-list {
      background: #2f6ea1 url(../images/theme/navigation/navigation-bg-normal.png) top left repeat-x;

      li {
        background: url(../images/theme/navigation/navigation-separator.png) top right repeat-y;
        border-bottom: 0;
        float: left;
        padding: 0 2px 0 0;
        zoom: 1;

        a {
          border-bottom: 0;
          display: inline-block;
          display: block;
        }

        .nav-list-sub-wrap {
          background: transparent url(../images/theme/navigation/navigation-sub-bg-arrow.png) top left no-repeat;
          display: none;
          left: 0;
          padding: 11px 0 0 0;
          position: absolute;
          top: 100%;
          width: 200px;
          z-index: 598;

          ul {
            background: #f9f9fb;
            border: 1px solid #bbc6ce;
            border-top: 0;
            margin: 0;
            padding: 0;
            z-index: 598;

            li {
              background: #f9f9fb;
              border-bottom: 1px solid #dadfe5;
            }
          }
        }
      }

      li.add-idea, li.add-idea:hover {
        float: right;

        a {
          background: #f2f2f2 url(../images/theme/navigation/navigation-bg-highlight.png) 0 0 repeat-x;
          color: #3177ae;
          font-weight: bold;
        }
      }

      li.login, li.logout {
        display: none;
      }

      li:hover>a {
        background: #3a84c1 url(../images/theme/navigation/navigation-bg-hover.png) top left repeat-x;
        color: #fff;
      }

      li:hover>.nav-list-sub-wrap {
        display: block;
      }
    }
  }

  #banner #navigationTrigger {
    display: none;
  }
}

// Mobile navigation toggle navigation
.show-navigation {
  #navigation {
    display: block;
  }
}
